<style>
@import '../../../static/css/swiper.min.css';
@import '../../../static/home/css/home.css' 
 
</style>
<template>
	<div id="homeDiv">

        <div class="swiper-container" id="topSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide"  v-for="item in wheel">
                    <a href="#"><img :src="item.img"></a>
                </div>
         
            </div>
        </div>

        <section class="mainInfo">
            
            <section v-for="main in mainlist">
                <h3>
                    {{ main.name }}
                    <a href="#">更多&gt;</a>
                    <span></span>
                </h3>
                <div>
                    <a href="#"><img :src="main.img"></a>
                </div>
                <ul>
                    <li>
                        <a>
                            <img :src="main.img1">
                            <span class="description">{{ main.longname1 }}</span>
                            <span>￥{{ main.price1 }}</span>
                            <s>￥{{ main.marketprice1 }}</s>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img :src="main.img2">
                            <span class="description">{{ main.longname2 }}</span>
                            <span>￥{{ main.price2 }}</span>
                            <s>￥{{ main.marketprice2 }}</s>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img :src="main.img3">
                            <span class="description">{{ main.longname3 }}</span>
                            <span>￥{{ main.price3 }}</span>
                            <s>￥{{ main.marketprice3 }}</s>
                        </a>
                    </li>
                </ul>
            </section>
            
        </section>

    </div>
</template>

<script>
	import axios from 'axios'
	import Swiper from '../../../static/js/swiper.min.js'
	export default{
		data(){
			return {
				wheel:"",
				mainlist: "",
			}
		},
		mounted(){
			const that = this;
			axios.get('/wheel')
				 .then(res => {
				 	that.wheel = res.data
				 	var swiper = new Swiper("#topSlider",{
				        direction: 'horizontal',
				        loop: true,
				        speed:500,
				        autoplay:1000,
				        observer: true
				    });
				    
				 })
			axios.post('/mainlist')
				 .then(res => {
				 	that.mainlist = res.data
				 })
		},
		/*mounted(){
       		
        },*/
	}
</script>

